<template>
	<div style="margin-left: 50px;">
		<el-tabs tab-position=left style="height: auto;">

			<el-tab-pane label="个人信息">

				<el-container>
					<el-aside width="200px" height="300px">
						<el-avatar @click.native="dialogFormVisible = true" style="width: 150px;height: 150px;margin-top: 100px;" :src="memberData.avatar == null ? avatar : memberData.avatar"></el-avatar>
						<el-dialog title="更改头像" :visible.sync="dialogFormVisible">
						  <el-form>
						    <el-form-item label="头像地址" :label-width="formLabelWidth">
						      <el-input v-model="memberData.avatar" autocomplete="off" placeholder="请输入头像链接"></el-input>
						    </el-form-item>
						  </el-form>
						  <div slot="footer" class="dialog-footer">
						    <el-button @click="dialogFormVisible = false">取 消</el-button>
						    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
						  </div>
						</el-dialog>
					</el-aside>
					<el-main>

						<div style="width: 300px;margin-top: 100px;">
							<el-form size="medium" label-position=right label-width="80px" :model="memberData">
								<el-form-item label="昵称">
									<el-input v-model="memberData.name"></el-input>
								</el-form-item>
								<el-form-item label="性别">
									<el-radio-group v-model="memberData.sex">
										<el-radio :label='"男"'>男</el-radio>
										<el-radio :label='"女"'>女</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="头像">
									<el-row class="demo-avatar demo-basic">
										<el-col v-for="(item,index) in avatarList" :key="index" :span="6">
											<div class="demo-basic--circle">
												<div class="block" @click="changeAvatar(index)">
													<el-avatar shape="square" :size="50" :src="item"></el-avatar>
												</div>
											</div>
										</el-col>
									</el-row>
								</el-form-item>
								<el-form-item label="邮箱">
									<el-input v-model="memberData.email"></el-input>
								</el-form-item>
								<el-button style="margin-left: 500px;" type="primary" @click="updateMemberInfo">保存</el-button>
							</el-form>
						</div>

					</el-main>
				</el-container>

			</el-tab-pane>
			<el-tab-pane label="我的收藏">
				<Collect></Collect>
			</el-tab-pane>
			<el-tab-pane label="我的购物车">
				<Cart></Cart>
			</el-tab-pane>
			<el-tab-pane label="我的订单">
				<Order></Order>
			</el-tab-pane>
			<el-tab-pane label="地址修改">

				<el-container>
					<!-- 左边显示地址 -->
					<el-card style="width: 500px;height: 200px;" class="">
						<el-tooltip v-for="(item,index) in addressList" :key="item.id" class="item" effect="dark" :content=item.receiverDetailAddr+item.receiverPhone
						 placement="top-start">
							<el-button style="padding: 10px;" @click="selectAddress(index)">收件人：{{item.receiverName}}</el-button>
						</el-tooltip>
					</el-card>

					<!-- 右边修改地址 -->
					<el-main>
						<div style="width: 300px;">
							<el-form size="medium" label-position=right label-width="80px" :model="addressData">
								<el-form-item label="接收者">
									<el-input v-model="addressData.receiverName"></el-input>
								</el-form-item>
								<el-form-item label="电话">
									<el-input v-model="addressData.receiverPhone"></el-input>
								</el-form-item>
								<el-form-item label="详细地址">
									<el-input v-model="addressData.receiverDetailAddr"></el-input>
								</el-form-item>
								<el-button style="margin-left: 500px;" type="primary" @click="updateAddress">保存</el-button>
							</el-form>
						</div>
					</el-main>
				</el-container>

			</el-tab-pane>
		</el-tabs>
	
	</div>
</template>
<script>
	import Collect from './Collect.vue'
	import Cart from './Cart.vue'
	import Order from './Order.vue'
	import addressApi from '../api/address.js'
	import userAPI from '../api/user.js'

	import {
		mapActions
	} from "vuex";
	import {
		mapGetters
	} from "vuex";


	export default {
		data() {
			return {
				userInfo: null,
				memberData: {
					name: '',
					sex: '男',
					avatar: '',
					email: ''
				},
				addressList: [],
				addressData: { //修改时的地址数据，请求体
					id: '', //地址id
					receiverName: '', //接收者id
					receiverPhone: '',
					receiverDetailAddr: ''
				},
				avatarList: [ //选择图片数据
					"https://cdn.ywart.com/face/artist_photos/avatar13.png@166h_166w_1e_1c_1wh_1pr",
					"http://cdn.ywart.com/face/artist_photos/avatar0.png@166h_166w_1e_1c_1wh_1pr",
					"http://cdn.ywart.com/face/artist_photos/avatar1.png@166h_166w_1e_1c_1wh_1pr",
					"http://cdn.ywart.com/face/artist_photos/avatar2.png@166h_166w_1e_1c_1wh_1pr",
					"http://cdn.ywart.com/face/artist_photos/avatar3.png@166h_166w_1e_1c_1wh_1pr",
					"http://cdn.ywart.com/face/artist_photos/avatar4.png@166h_166w_1e_1c_1wh_1pr"
				],
				avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
				        dialogFormVisible: false,
				        formLabelWidth: '120px'
			}
		},
		components: {
			Collect,
			Cart,
			Order
		},
		activated() {
			this.userInfo = this.getUser
			this.getAddressById()
			this.memberData = {
				name: this.userInfo.userName,
				sex: this.userInfo.sex,
				avatar: this.userInfo.header,
				email: this.userInfo.userEmail
			}
		},
		computed: {
			...mapGetters(["getUser"])
		},
		methods: {
			...mapActions(["setUser"]),

			// 选择图片，更改用户头像
			changeAvatar(index) {
				this.memberData.avatar = this.avatarList[index]
			},

			// 根据id查询所有地址信息
			getAddressById() {
				var user = this.getUser
				console.log("user", user)
				var userId = user.userId
				var userName = user.userName
				addressApi.getAddressById(userId)
					.then(res => {
						this.addressList = res.list
					})
			},

			// 更新用户信息
			updateMemberInfo() {
				const username = this.memberData.name
				const sex = this.memberData.sex
				const header = this.memberData.avatar
				const userEmail = this.memberData.email
				userAPI.user_update({
						id: this.userInfo.userId,
						username: username,
						sex: sex,
						header: header,
						userEmail: userEmail,
						name: this.userInfo.name,
						balance: this.userInfo.balance
				}).then(res => {
						this.setUser({
								userId: this.userInfo.userId,
								userName: username,
								sex: sex,
								header: header,
								userEmail: userEmail,
								name: this.userInfo.name,
								balance: this.userInfo.balance
						})
						//  登录信息存本地
						let user = JSON.stringify(this.getUser);
						localStorage.setItem("user", user);
						this.notifySucceed('修改成功！')
				})
			},

			//选择地址
			selectAddress(index) {
				if (this.addressList.length != 0) {
					this.addressData.id = this.addressList[index].id
					this.addressData.receiverName = this.addressList[index].receiverName
					this.addressData.receiverPhone = this.addressList[index].receiverPhone
					this.addressData.receiverDetailAddr = this.addressList[index].receiverDetailAddr
				}
			},

			// 修改地址
			updateAddress() {
				addressApi.updateAddressById(this.addressData)
					.then(res => {
						this.notifySucceed("修改地址成功！")
					})
			},
		}
	};
</script>

<style>
	.item {
		margin: 4px;
	}

	/* 容器的样式 */
	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	/* 布局Layout样式 */
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/* 地址卡片样式 */
	.text {
		font-size: 14px;
	}

	.item {
		padding: 18px 0;
	}

	.box-card {
		width: 480px;
	}
</style>
